import React, { useEffect, useState } from 'react';
import { Table, Input, Switch, Button, Form } from 'antd';

export default Form.create()(() => {
  const columns = [
    {
      title: '接口名称',
      dataIndex: 'apiName',
      key: 'name',
      render: (text) => <a>{text || '暂未配置'}</a>,
    },
    {
      title: '是否对接',
      key: 'action',
      render: (text, record) => {
        return (
          <Switch
            onChange={(checked) => onChangeSwitch(checked, record, text)}
          />
        );
      },
    },
    {
      title: '接口地址(测试环境)',
      dataIndex: 'proSit',
      key: 'proSit',
      render: (text, record) => {
        return record.access ? (
          <Input
            value={record.testUrl?record.testUrl:text}
            onChange={(e) => testUrlChange(e, text, record)}
          />
        ) : (
          <span>{text}</span>
        );
      },
    },
    {
      title: '接口地址 (生产环境)',
      dataIndex: 'proPro',
      key: 'proPro',
      render: (text, record) => {
        // console.log(text,record);
        return record.access ? (
          <Input
            value={record.proUrl?record.proUrl:text}
            onChange={(e) => proUrlChange(e, text, record)}
          />
        ) : (
          <span>{text}</span>
        );
      },
    },
  ];
  const [tableData, setTableData] = useState([
    {
      key: '1',
      apiName: '订单信息同步',
      proSit: 32,
      proPro: 'New York No. 1 Lake Park',
    },
    {
      key: '2',
      apiName: '司机实时位置推送',
      proSit: 42,
      proPro: 'London No. 1 Lake Park',
    },
    {
      key: '3',
      apiName: '支付状态同步',
      proSit: 32,
      proPro: 'arwaad. 1 Lake Park',
    },
  ]);
  const [formData, setFormData] = useState([]);


  let onChangeSwitch = (checked, record, text) => {
    let currentData = [];
    tableData.forEach((f) => {
      if (f.key === record.key) {
        // console.log(f,record);
        currentData.push({ ...f, access: checked });
      } else {
        currentData.push(f);
      }
    });
    console.log(currentData);
    setTableData(currentData);
  };

  let testUrlChange = (e, text, record) => {
    /* let testUrlData = tableData.map((f) => {
      if (f.key === record.key) {
        return {
          key: f.key,
          testUrl: e.target.value,
          proUrl:formData.length>0?(formData.find(item=>item.key==f.key)).proUrl:''
        };
      } else {
        return {
          key: f.key,
          testUrl: '',
          proUrl:formData.length>0?(formData.find(item=>item.key==f.key)).proUrl:'',
          ...formData.length>0&&(formData.find(item=>item.key==f.key))
        };
      }
    });
    // console.log(testUrlData);
    setFormData(testUrlData); */
    let testUrlData = [];
    tableData.forEach((f) => {
      if (f.key === record.key) {
        testUrlData.push({ ...f, testUrl: e.target.value });
      } else {
        testUrlData.push(f);
      }
    });
    // console.log(testUrlData);
    setTableData(testUrlData);
  };
  let proUrlChange = (e, text, record) => {
    let proUrlData = [];
    tableData.forEach((f) => {
      if (f.key === record.key) {
        proUrlData.push({ ...f, proUrl: e.target.value });
      } else {
        proUrlData.push(f);
      }
    });
    // console.log(proUrlData);
    setTableData(proUrlData);
    /* let proUrlData= tableData.map((f) => {
      if (f.key === record.key) {
        return {
          key: f.key,
          proUrl: e.target.value,
          testUrl:formData.length>0?(formData.find(item=>item.key==f.key)).testUrl:''
        };
      } else {
        return {
          key: f.key,
          proUrl:'',
          testUrl:formData.length>0?(formData.find(item=>item.key==f.key)).testUrl:'',
          ...formData.length>0&&(formData.find(item=>item.key==f.key))
        };
      }
    });
    // console.log(proUrlData);
    setFormData(proUrlData); */
  };
  // console.log(formData);
  // console.log(tableData);

  let save=()=>{
   let abc= tableData;
   console.log(tableData);
  }
  useEffect(() => {}, []);
  return (
    <div>
      <h2>About</h2>
      <Table columns={columns} dataSource={tableData} />
      <Button type='danger' onClick={save}>保存</Button>
    </div>
  );
});
